<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>

    <title>悦章科技机构平台</title>
    <script src="/Public/static/jquery-2.0.3.min.js"></script>
    <script src="/Public/static/layer/layer.js"></script>
    <script type="text/javascript" src="/Public/static/echarts.js"></script>
    <!--内容样式-->
    <link rel="stylesheet" href="__PUBLIC__/Home/css/style.css" />
    <link rel="stylesheet" href="__PUBLIC__/Home/css/page.css" />
</head>

<body>


<div class="main">


    <include file="menu" />

    <!--  右侧内容  -->
    <div class="content">


        <div class= "ct-title">
            <div class="ctt-bt">跟进记录</div>
            <div class="ctt-r">
                <form class="cttr-bd">
                    <select class="cttrb-xl" id="retrieval">
                        <option value="1" <if condition="$search eq 1">selected</if>>今日</option>
                        <option value="2" <if condition="$search eq 2">selected</if>>本周</option>
                        <option value="3" <if condition="$search eq 3">selected</if>>本月</option>
                        <option value="4" <if condition="$search eq 4">selected</if>>本季</option>
                        <option value="5" <if condition="$search eq 5">selected</if>>年度</option>
                    </select>
                    <select class="cttrb-xl" id="person">
                        <option value="">请选择负责人</option>
                        <volist name="person" id="vo">
                            <option value="{$vo.id}" <if condition="$person_id eq $vo['id']">selected</if>>{$vo.username}</option>
                        </volist>
                    </select>
                    <div class="cttrb-sj">
                        <input type="date" name="start_time" value="{$start_time}">
                        <img src="__PUBLIC__/Home/images/img_zhi.png" />
                        <input type="date" name="end_time" value="{$end_time}">
                        <div class="divclear"></div>
                    </div>
                    <a class="cttrb-cx" onclick="query()">查询</a>
                    <div class="divclear"></div>
                </form>
                <div class="divclear"></div>
            </div>
            <div class="divclear"></div>
        </div>

        <div class="tbfx-box">
            <div class="tb-title">图表分析</div>
            <div class="tb-tb">
                <div id="line" style="height: 100%;width:60%;float: left;"></div>
                <div id="container" style="height: 100%;width:35%;float: right;"></div>
            </div>
            <!--<div class="tb-tb">图表插件区域</div>-->
        </div>

        <div class="gjjl-tj">
            <div class="gt-box">
                <h3>{$gj_clue}/{$clue_count}</h3>
                <span>线索</span>
            </div>
            <div class="gt-box">
                <h3>{$gj_customer}/{$customer_count}</h3>
                <span>客户</span>
            </div>
            <div class="gt-box">
                <h3>{$gj_total}/{$total}</h3>
                <span>总数</span>
            </div>
            <div class="divclear"></div>
        </div>

        <div class="ct-table">
            <table width="100%" border="0">
                <tbody>
                <tr>
                    <th scope="col" width="25%" style="border-top-left-radius: 10px;">姓名</th>
                    <th scope="col" width="25%">线索</th>
                    <th scope="col" width="25%">客户</th>
                    <th scope="col" width="25%" style="border-top-right-radius: 10px;">总数</th>
                </tr>
                <volist name="_list" id="vo">
                    <tr>
                        <td>{$vo.username}</td>
                        <td>{$vo.clue}/{$vo.clue_count}</td>
                        <td>{$vo.customer}/{$vo.customer_count}</td>
                        <td>{$vo.total_contact_number}/{$vo.total_count}</td>
                    </tr>
                </volist>
                </tbody>
            </table>
        </div>

        <div class="page">
            {$_page}
        </div>
        <!--
        <div class="ct-btn">
            <div class="ctb-an"><</div>
            <div class="ctb-an ctb-an-on">1</div>
            <div class="ctb-an">2</div>
            <div class="ctb-an">3</div>
            <div class="ctb-an">></div>
            <div class="divclear"></div>
        </div>-->

    </div>
</div>
</body>
<script type="text/javascript">
    $("select[id='retrieval']").change(function(){
        var search = $(this).val();
        var url="{:U('Home/Index/follow_up_log')}";
        url=url+"&search="+search;
        location.href=url;
    })

    function query(){
        var person_id = $("#person").val();
        var start_time = $("input[name='start_time']").val();
        var end_time = $("input[name='end_time']").val();
        var search = 6;
        var url="{:U('Home/Index/follow_up_log')}";
        url=url+"&search="+search+"&person_id="+person_id+"&start_time="+start_time+"&end_time="+end_time;
        location.href=url;
    }
</script>

<script type="text/javascript">
    //-------饼图------
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    var customer_data = "{$customer_data}";
    var clue_data = "{$clue_data}";
    option = null;
    option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['客户', '线索']
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [
                    {value: customer_data, name: '客户'},
                    {value: clue_data, name: '线索'},
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }

    //------------折线图-----------
    var dom = document.getElementById("line");
    var myChart = echarts.init(dom);
    var app = {};
    //数据
    var line_time = "{$line_time}";//日期
    line_time = line_time.split(',');
    var line_obj_data = "{$line_obj_data}";//跟进对象
    line_obj_data = line_obj_data.split(',');
    var line_type_data = "{$line_type_data}";//跟进类型
    line_type_data = line_type_data.split(',');
    option = null;
    option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['跟进对象', '跟进类型']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: line_time
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '跟进对象',
                type: 'line',
                stack: '总量',
                data: line_obj_data
            },
            {
                name: '跟进类型',
                type: 'line',
                stack: '总量',
                data: line_type_data
            }
        ]
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
</html>
